<template>
	<div>
		<mainTop></mainTop>
		<div class="zzzbMiddleBox">
			<div class="zzzbPageHead">
				<ul @mouseleave="tqhyHeadHoverIndex = selectedTqhyHeadHover">
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==0||selectedTqhyHeadHover==0}" 
							@click="changeWeb(0)"
							@mouseover="tqhyHeadHoverIndex = 0">正在直播</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==1||selectedTqhyHeadHover==1}" 
							@click="changeWeb(1)"
							@mouseover="tqhyHeadHoverIndex = 1">直播预告</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==2||selectedTqhyHeadHover==2}" 
							@click="changeWeb(2)"
							@mouseover="tqhyHeadHoverIndex = 2">直播回放</li>
					
				</ul>
			</div>
		</div>
        <div class="spzqMiddleBox">
			<div style="width: 1140px;margin: 0 auto;">
			<div class="zzzb" >
				<div class="spModule"
					v-for="(item,index) in videos.rows"
					:key="index"
				>
					<a @click="getQrCode(item.liveQrCode)"  style="text-decoration: none;color: #150e52;cursor: pointer;">
					<div style="width: 100%;height: 240px; position: relative;"><img :src="'https://zha.heavenk.com/prod-api'+ item.livePublicityImage" alt="" style="width:100%;height: 100%;" >
					
					<img src="../images/livebackground.png" style="position: absolute;right: 12px;top: 12px;"/>
                    <img src="../images/liveicon.png" style="position: absolute;right: 39px;top: 16px;"/>
                    <img src="../images/liveicon2.png" style="position: absolute;right: 32px;top: 21px;"/>
                    <img src="../images/liveicon3.png" style="position: absolute;right: 25px;top: 19px;"/>
                    <p style="position: absolute;right: 51px;top: 15px;font-size: 20px;color: #ffffff;text-shadow: 2px 2px 5px #8f8f8f;">直播中</p>
					</div>
					<div style="padding: 5px 15px;font-size: 18px;">
						<div style="color: #150e52;font-weight: 600;max-height: 48px;overflow: hidden;">{{ item.liveName }}</div>
						<div style="color: #150e52;margin-top: 8px;">时间：{{ item.liveStartTime }}</div>
					</div>
					</a>
				</div>
                
				
                
			</div>
           
			</div>
		</div>
		<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 35px;height: 40px;" >
			<div style="height: 80px;float: right;" v-if="total">
					 <el-pagination
					      @size-change="handleSizeChange"
					      @current-change="handleCurrentChange"
					      :current-page.sync="currentPage"
					      :page-size="9"
					      layout="prev, pager, next"
					      :total="this.total">
					    </el-pagination>
						<div class="el-pagination__jump">
							共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
								<input type="text" class="inputNum" v-model="pageInputNum"
								oninput="value=value.replace(/[^\d]/g,'');
								if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
								value= value.substr(1,1)}" >
						        </div>
						页
						</div>
						
					<button class="button1" style=""  @click="changePage">确定</button>
			    </div>
		</div>
		<el-dialog
		  
		  :visible.sync="centerDialogVisible"
		  width="810px"
		
		  center>
		  <div class="dialogLeft" style="">
			  <!-- <img src="../images/dialogBg.png" style="width: 100%;height: 100%;" alt=""> -->
			  <div style="text-align: center;margin-top: 130px;">
				  <img src="../images/dialogImg1.png" style="width: 60px;" alt="">
			  </div>
			  <div style="margin-left: 10px;margin-top: 60px;">
				  <img src="../images/diaText.png" alt="">
			  </div>
			  
			  </div>
			<div style="text-align: center;margin-top: 105px;">
				<img :src="this.QrCode" style="width: 190px;height: 190px;" alt="">
				<div style="font-size: 28px;color: #201b1b;margin-top: 20px;letter-spacing: 2px;">
					扫码 <div style="font-weight: 600;margin-top: -1px;margin: 0px 5px; display: inline-block;">—</div> 进入直播间
				</div>
			</div>
		 
		</el-dialog>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
			   tqhyHeadHoverIndex:0,
			   selectedTqhyHeadHover:0,
			   pageSize: 16,
			   totalCount: 1,
			   totalPageSize:1,
			   pageInputNum:'',
			   currentPage: 1,
			   moduleHoverIndex:-1,
			   selectedModuleHover:-1,
			   meeting:'',
			   total:5,
			   currentDateTime:'',
			   checkStatus:['视频回放','视频回放','视频回放','视频回放','视频回放'],
               videos:'',
			   centerDialogVisible: false,
			   QrCode:'',
			   };
			},
		created(){
			this.getMeeting(1)
		},
		methods:{
			getQrCode(qrcode){
				this.centerDialogVisible=true
				this.QrCode='https://zha.heavenk.com/prod-api'+ qrcode
				
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange() {
			//    this.contentPerPage.pn=this.currentPage;
			//    contentList(this.contentPerPage).then(response => {
			//            this.contentPerPageList = response.data;
			//          });
				this.getMeeting(this.currentPage)
			},
			changeFirstPage(){
				this.currentPage=1;
				this.handleCurrentChange();
			},
			changeLastPage(){
				this.currentPage=this.totalPageSize;
				this.handleCurrentChange();
			},
			getTotalPageSize(){
				this.totalPageSize=this.totalCount/this.pageSize
			},
			changePage(){
				this.currentPage=parseInt(this.pageInputNum);
				this.handleCurrentChange();
			},
			changeWeb(num){
				this.selectedTqhyHeadHover=1
				switch (num) {
					case 0:
						this.$router.push('/zzzb')
						break;
					case 1:
						this.$router.push('/zbyg')
						break;
					case 2:
						this.$router.push('/zbhf')
						break;
					case 3:
						this.$router.push('/sphf')
						break;
					default:
						break;
				}

			},
			getMeeting(pnum){
				let add=[]
				axios.get('https://zha.heavenk.com/prod-api/web/gooseLive/start',{
					params:{
						pageSize:9,
						pageNum:pnum,
					}
				}).then((res)=>{
                    this.videos=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/9)
					
					// if (this.meeting.rows) {
					// 	for (let index = 0; index < this.meeting.rows.length; index++) {
					// 		const nowdate = new Date();  
					// 		nowdate = nowdate.getTime();
					// 		const sdate = new Date(this.meeting.rows[index].startTime);  
					// 		sdate = sdate.getTime();
					// 		const edate = new Date(this.meeting.rows[index].endTime);  
					// 		edate = edate.getTime();
					// 		if(nowdate>sdate&&nowdate<edate){
					// 			add.push('正在直播')
					// 		}else if(nowdate<sdate){
					// 			add.push('即将开播')
					// 		}
					// 		else{
					// 			add.push('视频回放')
					// 		}	
					// 	}
					// }
					
                })
				this.checkStatus=add
				// console.log(this.checkStatus);
			}
		},
		}
</script>

<style>
    .spzqMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.zzzb{
		width: 1130px;
		min-width: 1140px;
		/* height: 1166px; */
		margin: auto;
		margin-top: 55px;
		min-height: 500px;
		
	}
	.spModule{
		width: 362px;
		height: 337px;
		background-color: #fff;
		display: inline-block;
		margin-right: 26px;
		/* float: left; */
		margin-bottom: 25px;
	}
    .spModule:nth-child(3n){
		width: 363px;
		height: 337px;
		background-color: #fff;
		display: inline-block;
		/* float: left; */
		margin-bottom: 25px;
		margin-right: 0px !important;
	}
	.spModuleRight{
		width: 363px;
		height: 337px;
		background-color: #fff;
		display: inline-block;
		/* float: left; */
		margin-bottom: 25px;
	}
	.zzzbMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.zzzbPageHead{
		width: 1140px;
		min-width: 1140px;
		height: 60px;
		margin: auto;
		margin-top: 33px;
	}
	.zzzbPageHead ul{
		list-style: none;
		text-align: center;
		height: 60px;
		width: 1140px;
	}
	.zzzbHeadHover{
		background-color: #150e52 !important;
		color: #fff !important;
	}
    .zzzbPageHead ul li:nth-child(1){
		width: 195px;
		height: 50px;
		margin: auto;
		line-height: 50px;
		float: left;
        margin-left: 100px;
		margin-right:190px;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		border-radius: 30px;
		border: 2px solid #150e52;
		cursor: pointer;
	} 
	.zzzbPageHead ul li:nth-child(2){
		width: 195px;
		height: 50px;
		margin: auto;
		line-height: 50px;
		float: left;
		margin-right:190px;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		border-radius: 30px;
		border: 2px solid #150e52;
		cursor: pointer;
	} 
	.zzzbPageHead ul li:nth-child(3){
		width: 195px;
		height: 50px;
		line-height: 50px;
		float: left;
		margin: auto;
		border-radius: 30px;
		border: 2px solid #150e52;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
	}
	
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
/* 	.tqhy{
		width: 1140px;
		min-width: 1140px;
		margin: auto;
		margin-top: 35px;
		height: 1768px;
	} */
	.liHover{
		color: #fff !important;
		background-color: #150e52 !important;
		border-radius: 15px;
	}
	.tqhyContent{
		width: 1140px;
		min-width: 1140px;
		margin-top: 30px;
		height: 1698px;
		overflow: hidden;
	}
	.tqhyModule{
		width: 1080px;
		height: 262px;
		/* background-color: #fff; */
		padding: 30px 30px;
		position: relative;
		margin-bottom: 22px;
	}
	.moduleHover{
		background-color: #fff !important;
	}
</style>